<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="所属部门" prop="depId">
                <el-select v-model="queryParams.depId" size="small" placeholder="请选择：">
                    <el-option
                            v-for="item in departmentOption"
                            :key="item.id"
                            :label="item.depName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="userName" >
                <el-input
                        v-model="queryParams.userName"
                        placeholder="请输入用户名"
                        clearable
                        style="width: 240px;"
                        size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                           v-has="'basic:loginsystem:page'">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list">
            <el-table-column label="会话编号" align="center" prop="id" />
            <el-table-column label="用户名" align="center" prop="userName" />
            <el-table-column label="部门名称" align="center" prop="depName" />
            <el-table-column label="登录地点" align="center" prop="loginLocation" />
            <el-table-column label="浏览器" align="center" prop="browser" />
            <el-table-column label="登录状态" align="center" prop="loginStar" />
            <el-table-column label="登录信息" align="center" prop="loginRemark"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="getdetails(scope.row)"
                            v-has="'basic:loginsystem:view'"
                    >查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />



        <!-- 添加或修改参数配置对话框 -->
        <el-dialog class="delit" :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form :model="form" >
                <el-row type="flex" justify="center" >
                    <el-col :span="10"><span>用户id：</span>{{form.userId}}</el-col>
                    <el-col :span="10"><span>用户名：</span>{{form.userName}}</el-col>
                </el-row>
                <el-row type="flex"  justify="center" >
                    <el-col :span="10"><span>部门编号：</span>{{form.depId}}</el-col>
                    <el-col :span="10"><span>部门名称：</span>{{form.depName}}</el-col>
                </el-row>
                <el-row type="flex" justify="center" >
                    <el-col :span="10"><span>登录ip：</span>{{form.hostIp}}</el-col>
                    <el-col :span="10"><span>登录地点：</span>{{form.loginLocation}}</el-col>
                </el-row>
                <el-row type="flex" justify="center" >
                    <el-col :span="10"><span>浏览器：</span>{{form.browser}}</el-col>
                    <el-col :span="10"><span>浏览器版本：</span>{{form.browserVersion}}</el-col>
                </el-row>
                <el-row type="flex" justify="center" >
                    <el-col :span="10"><span>操作系统：</span>{{form.operatingSystem}}</el-col>
                    <el-col :span="10"><span>登录状态：</span>{{form.loginStar}}</el-col>
                </el-row>

                <el-row type="flex" justify="center" >
                    <el-col :span="10"><span>登陆人：</span>{{form.creatar}}</el-col>
                    <el-col :span="10"><span>登录时间：</span>{{form.createTime}}</el-col>
                </el-row>
                <el-row type="flex" justify="center" >
                    <el-col :span="20"><span>登录信息：</span>{{form.loginRemark}}</el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {loglist,getlog} from "@/api/system/loginfo";
    import {departmentlist} from "@/api/user/department";
    export default {
        name: "loginfo",
        data() {
            return {
                //码值
                departmentOption: [],
                title:'查看详情',
                open:false,
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 表格数据
                list: [],
                // 表单参数
                form: {},
                // 日期范围
                dateRange: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userName:null,
                    depName:null,
                }
            };
        },
        created() {
            this.getList();
            this.getDepartmentlist();
        },
        methods: {
            /** 查询部门下拉框列表 */
            getDepartmentlist() {
                departmentlist().then(response => {
                        this.departmentOption = response.data;
                    }
                );
            },
            /** 查询登录日志列表 */
            getList() {
                this.loading = true;
                loglist(this.queryParams).then(response => {
                        this.list = response.data.records;
                        this.total = response.data.total;
                        this.loading = false;
                    }
                );
            },
            getdetails(row){
                getlog(row.id).then(response => {
                    this.open=true;
                    this.form=response.data;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.queryParams.pageNum = 1;
                this.handleQuery();
            }
        }
    };
</script>
<style>
    .delit .el-col{
        margin-top: 5%;
    }
    .delit .el-form .el-row .el-col span{
        font-size: 18px;
        font-weight:bold;
    }
</style>
